<template>
    <nav :style="{flexDirection: rtl ? 'row-reverse' : 'row'}">
        <a @click="itemSelected(index)" v-for="(item, index) in navs" class="item" :key="index" :class="{selected: index == innerSelectedIndex || selectedItem == item}">
            <img class="image" :src="item.image" :alt="item.image">
            <p class="label">{{ typeof item.text == "function" ? item.text() : item.text }}</p>
        </a>
    </nav>
</template>

<script>
export default {
  props: [
    "rtl",
    "navs",
    "selectedItem",
    "selectedIndex"
  ],

  data: () => {
    return {
      innerSelectedIndex: this.selectedIndex
    };
  },
  watch: {
    selectedIndex(value){
      this.innerSelectedIndex = value
    },
    innerSelectedIndex(value){
      this.$emit("onSelected", value, this.navs[value]);
    }
  },
  methods: {
    itemSelected(index) {
      this.innerSelectedIndex = index;
    }
  },
  created(){
    this.innerSelectedIndex = this.selectedIndex || 0;
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/colors";

$nav-height: 70px;
$nav-item-width: 80px;
$nav-item-label-height: 30px;
$nav-item-image-width: 40px;
$nav-item-image-height: $nav-item-image-width;

* {
  margin: 0;
  padding: 0;
}

nav {
  height: $nav-height;
  border: {
    bottom: {
      style: solid;
      color: #ccc;
      width: 1px;
    }
  }
  display: flex;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    // background-color: red;
    width: $nav-item-width;

    text-decoration: none;

    .image {
      margin: {
        top: 5px;
      }
      flex-grow: 1;
      width: $nav-item-image-width;
      height: $nav-item-image-height;
    }
    .label {
      font-size: 12px;
      height: $nav-item-label-height;
      width: 100%;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      color: $fore-color;
    }
  }
  .selected {
    border: {
      bottom: {
        color: orange;
        width: 2px;
        style: solid;
      }
    }
  }
}
</style>
